<template>

    <CommonCard title="今日销售额" :count="salesToday" >
        <template #middle>
            <div class="content">
                <span>日同比</span>
                <span class="ml-5 mr-5">{{ salesGrowthLastDay }}</span>
                <span class="down"></span>
            </div>
            <div class="content">
                <span>月同比</span>
                <span class="ml-5 mr-5">{{ salesGrowthLastMonth }}</span>
                <span class="up"></span>
            </div>
        </template>
        <template #bottom>
            <span>昨日销售额</span>
            <span class="ml-10">{{ salesLastDay }}</span>
        </template>
    </CommonCard>

</template>

<script setup lang="ts">
import CommonCard from "../CommonCard/index.vue"
import useEchartStore from '@/stores/echart'
import { computed } from "vue";
const echartStore = useEchartStore();
const salesToday = computed(() => {
    return echartStore.echartData.salesToday
})
const salesGrowthLastDay = computed(() => {
    return echartStore.echartData.salesGrowthLastDay
})
const salesGrowthLastMonth = computed(() => {
    return echartStore.echartData.salesGrowthLastMonth
})
const salesLastDay = computed(() => {
    return echartStore.echartData.salesLastDay
})
</script>

<style lang="scss" scoped>

.content {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #888;
        font-weight: bold;
}

.up {
    border: 5px solid red;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
}

.down {
    border: 5px solid blue;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

</style>